<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注意点</title>
    <script src="../1.前期Vue/vue.js"></script>
</head>
<body>
<!--
    注意点：
        1.关于组件名：
            一个单词组成：
                第一种写法：school
                第二种：School
            多个单词的写法：
                第一种：my-school
                第二种：MySchool
            备注：
                组件名尽可能回避HTML中已有的元素名，例如h2，H2
                可以使用name配置项指定组件在开发工具呈现的名字
         2.关于组件标签：
                第一种写法：<school></>school>
                第二种：<school/>
                备注：不使用脚手架时，<school/>会导致组件不能渲染
         3.简写方式：
                const school = Vue.extend(options)
                缩写为： const school = options



-->
<div id="root">
  <app></app>
</div>
</body>
<script type="text/javascript">
    const school1 = Vue.extend({
        template:'<h2>welcome：{{msg}}</h2>',
        data(){
            return {msg:'您'}
        },
    })
//组件嵌套
 const school =  Vue.extend({
    template:'<div><h2>welcome：{{msg}}</h2>' +
        ' <school1></school1></div>',
    data(){
      return {msg:'您'}
    },
     components: {
        school1
     }

  })
    const app={
        template:'<div><school></school>' +
            '<school1></school1></div> ',
        components:{
            school,school1
        }
    }

 const vm = new Vue({
   el:'#root',
   components:{
     app
   }
 })



</script>
</html>
